//<feature charts>
Ext.define('AkData.view.SiparisTuruBazindaSevkiyat', {
    extend: 'Ext.Panel',
    requires: ['Ext.chart.Chart', 'Ext.chart.interactions.PanZoom', 'Ext.chart.series.Bar', 'Ext.chart.axis.Numeric', 'Ext.chart.axis.Category', 'Ext.carousel.Carousel'],
    config: {
		layout: 'vbox',
		
        items: [
			{
                xtype: 'toolbar',
				docked: 'top',
				centered: true,
				cls: 'ara-toolbar',
				title: 'Sipariş Grubu Bazında Sevkiyatlar',
				style: {'font-size': '10px','background': '#E8E8E8', '-webkit-text-fill-color': '#000',}
            },
            {
                xtype: 'toolbar',
				id: 'SiparisTuruBazindaSevkiyat_toolbar',
				docked: 'bottom',
				centered: true,
				style: {'background': 'white'},
				items: [
					{
                        text: 'Tip 1',
						disabled: true,
						id: 'siparisturubazindasevkiyat_buton_tip1',
						style: {'background': '#E8E8E8', 'color': 'black'},
                        handler: function (button) {
							Ext.data.StoreManager.lookup('SiparisTuruBazindaSevkiyat_Store').sort({property: 'id', direction: 'ASC'});
							
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID1').setHidden(true);
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID2').setHidden(false);
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID3').setHidden(true);
							
							button.setDisabled(true);
							
							Ext.getCmp('siparisturubazindasevkiyat_buton_tip2').setDisabled(false);
							Ext.getCmp('siparisturubazindasevkiyat_buton_tip3').setDisabled(false);
							Ext.getCmp('siparisturubazindasevkiyat_buton_tip4').setDisabled(false);
							
							Ext.getCmp('SiparisTuruBazindaSevkiyat_Grid').setHidden(true);
							
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID1').getLegend().setHidden(true);
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID2').getLegend().setHidden(false);
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID3').getLegend().setHidden(true);
                        }
                    },
					{
                        text: 'Tip 2',
						id: 'siparisturubazindasevkiyat_buton_tip2',
						style: {'background': '#E8E8E8', 'color': 'black'},
                        handler: function (button) {
							Ext.data.StoreManager.lookup('SiparisTuruBazindaSevkiyat_Store').sort({property: 'id', direction: 'DESC'});
							
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID1').setHidden(false);
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID2').setHidden(true);
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID3').setHidden(true);
							
							button.setDisabled(true);
							
							Ext.getCmp('siparisturubazindasevkiyat_buton_tip1').setDisabled(false);
							Ext.getCmp('siparisturubazindasevkiyat_buton_tip3').setDisabled(false);
							Ext.getCmp('siparisturubazindasevkiyat_buton_tip4').setDisabled(false);
							
							Ext.getCmp('SiparisTuruBazindaSevkiyat_Grid').setHidden(true);
							
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID1').getLegend().setHidden(false);
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID2').getLegend().setHidden(true);
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID3').getLegend().setHidden(true);
                        }
                    },
					{
						text: 'Tip 3',
						id: 'siparisturubazindasevkiyat_buton_tip3',
						style: {'background': '#E8E8E8', 'color': 'black'},
						handler: function (button) {
							Ext.data.StoreManager.lookup('SiparisTuruBazindaSevkiyat_Store').sort({property: 'id', direction: 'ASC'});
							
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID1').setHidden(true);
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID2').setHidden(true);
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID3').setHidden(false);
							
							button.setDisabled(true);
							
							Ext.getCmp('siparisturubazindasevkiyat_buton_tip1').setDisabled(false);
							Ext.getCmp('siparisturubazindasevkiyat_buton_tip2').setDisabled(false);
							Ext.getCmp('siparisturubazindasevkiyat_buton_tip4').setDisabled(false);
							
							Ext.getCmp('SiparisTuruBazindaSevkiyat_Grid').setHidden(true);
							
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID1').getLegend().setHidden(true);
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID2').getLegend().setHidden(true);
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID3').getLegend().setHidden(false);
                        }
                    },
					{
						text: 'Tip 4',
						//iconCls: 'more',
						id: 'siparisturubazindasevkiyat_buton_tip4',
						style: {'background': '#E8E8E8', 'color': 'black'},
						handler: function (button) {
							Ext.data.StoreManager.lookup('SiparisTuruBazindaSevkiyat_Store').sort({property: 'id', direction: 'ASC'});
							
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID1').setHidden(true);
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID2').setHidden(true);
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID3').setHidden(true);
							
							button.setDisabled(true);
							
							Ext.getCmp('siparisturubazindasevkiyat_buton_tip1').setDisabled(false);
							Ext.getCmp('siparisturubazindasevkiyat_buton_tip2').setDisabled(false);
							Ext.getCmp('siparisturubazindasevkiyat_buton_tip3').setDisabled(false);
							
							Ext.getCmp('SiparisTuruBazindaSevkiyat_Grid').setHidden(false);
							Ext.getCmp('SiparisTuruBazindaSevkiyat_Grid').setHeight('100%');
							
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID1').getLegend().setHidden(true);
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID2').getLegend().setHidden(true);
							Ext.getCmp('SiparisTuruBazindaSevkiyat_ID3').getLegend().setHidden(true);
                        }
                    },
					/*
					{
                        text: 'Tip 3',
						hidden: true,
						id: 'htboyamakg_buton_tip3',
						style: {'background': '#E8E8E8', 'color': 'black'},
                        handler: function (button) {
							
							Ext.getCmp('HTBoyamaKG_ID1').setHidden(true);
							Ext.getCmp('HTBoyamaKG_ID2').setHidden(false);
							button.setDisabled(true);
							Ext.getCmp('htboyamakg_buton_tip1').setDisabled(false);
							Ext.getCmp('htboyamakg_buton_tip2').setDisabled(false);
							Ext.getCmp('htboyamakg_buton_tip4').setDisabled(false);
							
							Ext.getCmp('HTBoyamaKG_Grid').setHidden(false);
							Ext.getCmp('HTBoyamaKG_Grid').setHeight(150);
							
							Ext.getCmp('HTBoyamaKG_ID1').getLegend().setHidden(true);
							Ext.getCmp('HTBoyamaKG_ID2').getLegend().setHidden(false);
							
							//Ext.getCmp('HTBoyamaKG_ID1').redraw(true);
							//Ext.getCmp('HTBoyamaKG_ID2').redraw(true);
                        }
                    },
					*/
                    {
                        iconCls: 'refresh',
						style: {'background': '#E8E8E8', 'color': 'black'},
                        handler: function () {
							Ext.Viewport.mask({xtype: 'loadmask', message: _lang_Yukleniyor});
							Ext.getStore('SiparisTuruBazindaSevkiyat_Store').load(function(records, operation, success) {Ext.Viewport.unmask();}, this);
                        }
                    },
				]
            },
			{
				flex: 1,
                xtype: 'chart',
                store: 'SiparisTuruBazindaSevkiyat_Store',
                background: 'white',
				animate: false,
				hidden: true,
				id: 'SiparisTuruBazindaSevkiyat_ID2',
                colors: AkData.view.ColorPatterns.getAlteredBaseColorsHSL({s: -0.1}),
				legend: {docked: 'top',},
				innerPadding: {bottom: 20},
                series: [
                    {
                        type: 'bar',
                        xField: 'periyod',
                        yField: ['satis', 'fason', 'numune', 'tamir'],
						title: ['Satış', 'Fason', 'Numune', 'Tamir'],
                        stacked: false,
						style: {maxBarWidth: 40},
						
						highlightCfg: {fillStyle: '#FFF',},
						
						label: {
							//display: 'insideEnd', 
							field: ['satis', 'fason', 'numune', 'tamir'],
						},
						
						renderer: function(sprite, config, rendererData, index) {
                            var store = rendererData.store,
                                storeItems = store.getData().items,
                                last = storeItems.length - 1,
                                record = storeItems[index],
                                surface = sprite.getParent(),
                                textSprites, textSprite;
                            if (!record) {
                                return;
                            }
                            
							textSprites = surface.myTextSprites;
							if (!textSprites) {
								textSprites = surface.myTextSprites = [];
							}
							textSprite = textSprites[index];
							if (!textSprite) {
								textSprite = textSprites[index] = surface.add({type:'text'});
							} else {
								textSprite.show();
							}
							
							textSprite.setAttributes({text: "mt/1000", x: config.x - 5, y: -7, fill: 'black', fontSize: 12, zIndex: 10001, scalingY: -1});
                        },
                    }
                ],
				
				interactions: [
					{
						type: 'iteminfo',
						panel: {height: 200, items: [{docked: 'top', xtype: 'toolbar', title: 'Bilgi'}]},
						listeners: {
							show: function(me, item, panel) {
								panel.setHtml(
								'<ul>' + 
								'<li><b>Periyod: </b>' + item.record.get('periyod') + '</li>' + 
								'<li><b>Satış: </b>' + item.record.get('satis') + '</li>' + 
								'<li><b>Fason: </b>' + item.record.get('fason') + '</li>' + 
								'<li><b>Numune: </b>' + item.record.get('numune') + '</li>' + 
								'<li><b>Tamir: </b>' + item.record.get('tamir') + '</li>' + 
								'<li><b>Hedef: </b>' + item.record.get('hedef') + '</li>' + 
								'<li><b>Gerçek: </b>' + item.record.get('gercek') + '</li>' + 
								'</ul>');
							}
						}	
					}
				],
				
                axes: [
                    {
                        type: 'numeric',
                        position: 'left',
                        fields: ['satis', 'fason', 'numune', 'tamir'],
						grid: {
							odd: {opacity: 1, fill: '#ddd', stroke: '#bbb', lineWidth: 1}
						},
						label: {/*rotate: {degrees: -30},*/ fontSize: 9}
                    },
                    {
                        type: 'category',
                        position: 'bottom',
                        fields: 'periyod',
                    }
                ]
            },
			{
				flex: 1,
                xtype: 'chart',
                store: 'SiparisTuruBazindaSevkiyat_Store',
                background: 'white',
				hidden: true,
				animate: false,
				id: 'SiparisTuruBazindaSevkiyat_ID1',
                colors: AkData.view.ColorPatterns.getAlteredBaseColorsHSL({s: -0.1}),
				legend: {docked: 'top', hidden: true, /*minHeight: 60,*/},
				flipXY: true,
				innerPadding: {left: 20},
                series: [
                    {
                        type: 'bar',
                        xField: 'periyod',
                        yField: ['satis', 'fason', 'numune', 'tamir'],
						title: ['Satış', 'Fason', 'Numune', 'Tamir'],
                        stacked: false,
						style: {maxBarWidth: 40},
						highlightCfg: {fillStyle: '#FFF',},
						
						label: {
							//display: 'insideEnd', 
							field: ['satis', 'fason', 'numune', 'tamir'],
						},
						
						renderer: function(sprite, config, rendererData, index) {
                            var store = rendererData.store,
                                storeItems = store.getData().items,
                                last = storeItems.length - 1,
                                record = storeItems[index],
                                surface = sprite.getParent(),
                                textSprites, textSprite;
                            if (!record) {
                                return;
                            }
                            
							textSprites = surface.myTextSprites;
							if (!textSprites) {
								textSprites = surface.myTextSprites = [];
							}
							textSprite = textSprites[index];
							if (!textSprite) {
								textSprite = textSprites[index] = surface.add({type:'text'});
							} else {
								textSprite.show();
							}
							
							textSprite.setAttributes({
								text: "mt/1000",
								x: config.x - 35,
								y: -7,
								fill: 'black',
								fontSize: 12,
								zIndex: 10001,
								//scalingY: -1
							});
                        },
                    }
                ],
				
				interactions: [
					{
						type: 'iteminfo',
						panel: {height: 200, items: [{docked: 'top', xtype: 'toolbar', title: 'Bilgi'}]},
						listeners: {
							show: function(me, item, panel) {
								panel.setHtml(
								'<ul>' + 
								'<li><b>Periyod: </b>' + item.record.get('periyod') + '</li>' + 
								'<li><b>Satış: </b>' + item.record.get('satis') + '</li>' + 
								'<li><b>Fason: </b>' + item.record.get('fason') + '</li>' + 
								'<li><b>Numune: </b>' + item.record.get('numune') + '</li>' + 
								'<li><b>Tamir: </b>' + item.record.get('tamir') + '</li>' + 
								'<li><b>Hedef: </b>' + item.record.get('hedef') + '</li>' + 
								'<li><b>Gerçek: </b>' + item.record.get('gercek') + '</li>' + 
								'</ul>');
							}
						}	
					}
				],
				
                axes: [
                    {
                        type: 'numeric',
                        position: 'bottom',
                        fields: ['satis', 'fason', 'numune', 'tamir'],
						grid: {
							odd: {opacity: 1, fill: '#ddd', stroke: '#bbb', lineWidth: 1}
						},
						label: {/*rotate: {degrees: -30},*/ fontSize: 9}
                    },
                    {
                        type: 'category',
                        position: 'left',
                        fields: 'periyod',
						label: {/*rotate: {degrees: -90},*/ fontSize: 12},
                    }
                ]
            },
			{
				//flex: 2,
                xtype: 'grid',
                store: 'SiparisTuruBazindaSevkiyat_Store',
				titleBar: false,
				hidden: true,
				id: 'SiparisTuruBazindaSevkiyat_Grid',
				
				height: 150,
				
                headerContainer: {height: 30},
				itemHeight: 30,
				style: 'font-size: 11px;',
				
				masked: {xtype: 'loadmask', message: _lang_Yukleniyor},
				
                columns: [
					{
						text: 'Periyod',
						summaryType: 'count', summaryRenderer: function(value, summaryData, dataIndex) {return 'Toplam:';},
						dataIndex: 'periyod',
						width: '20%',
						style: 'line-height: 30px;',
						sortable: false,
					},
					{
						text: 'Satış',
						dataIndex: 'satis',
						width: '14%',
						style: 'line-height: 30px;',
						sortable: false,
						renderer: function(value, record) {return numberformat(value);},
						summaryType: 'sum', summaryRenderer: function(value) {return numberformat(value);}
					},
					{
						text: 'Fason',
						dataIndex: 'fason',
						width: '14%',
						style: 'line-height: 30px;',
						sortable: false,
						renderer: function(value, record) {return numberformat(value);},
						summaryType: 'sum', summaryRenderer: function(value) {return numberformat(value);}
					},
					{
						text: 'Numune',
						dataIndex: 'numune',
						width: '14%',
						style: 'line-height: 30px;',
						sortable: false,
						renderer: function(value, record) {return numberformat(value);},
						summaryType: 'sum', summaryRenderer: function(value) {return numberformat(value);}
					},
					{
						text: 'Tamir',
						dataIndex: 'tamir',
						width: '14%',
						style: 'line-height: 30px;',
						sortable: false,
						renderer: function(value, record) {return numberformat(value);},
						summaryType: 'sum', summaryRenderer: function(value) {return numberformat(value);}
					},
					{
						text: 'Toplam',
						dataIndex: 'gercek',
						width: '14%',
						style: 'line-height: 30px;',
						sortable: false,
						renderer: function(value, record) {return numberformat(value);},
						summaryType: 'sum', summaryRenderer: function(value) {return numberformat(value);}
					},
					{
						text: '%',
						dataIndex: 'yuzde',
						width: '10%',
						style: 'line-height: 30px;',
						sortable: false,
						renderer: function(value, record, colIndex) {return numberformat(value) + '%';},
						//summaryType: 'average', summaryRenderer: function(value, summaryData, dataIndex) {return numberformat(parseInt(value)) + '%';}
					}
				],
				plugins: Ext.create('Ext.grid.plugin.SummaryRow', {docked: 'top', style: 'font-size: 11px; font-weight: bold;'}),
            },
			{
				flex: 1,
                xtype: 'chart',
				hidden: true,
				animate: false,
                store: 'SiparisTuruBazindaSevkiyat_Store',
				id: 'SiparisTuruBazindaSevkiyat_ID3',
                background: 'white',
				legend: {docked: 'top', hidden: true, toggleable: false},
				
				innerPadding: {top: 20, left: 20, right: 20, bottom: 50},
				
				interactions: [{type: 'panzoom',zoomOnPanGesture: false},'itemhighlight'],
				
                series: [
                    {
                        type: 'line',
                        xField: 'periyod',
                        yField: 'hedef',
						title: 'Hedef',
						style: {stroke: 'rgb(17,95,166)', lineWidth: 4},
						
						renderer: function(sprite, config, rendererData, index) {
                            var store = rendererData.store,
                                storeItems = store.getData().items,
                                record = storeItems[index],
                                surface = sprite.getParent(),
                                textSprites, textSprite, rectSprite, yuzde, yuzdeDaire;
								
                            if (!record) {
                                return;
                            }
							
							textSprites = surface.myTextSprites;
							if (!textSprites) {
								textSprites = surface.myTextSprites = [];
							}
							textSprite = textSprites[index];
							if (!textSprite) {
								textSprite = textSprites[index] = surface.add({type:'text'});
								rectSprite = textSprite.rectSprite = surface.add({type:'rect'});
								
								yuzdeDaire = textSprite.yuzdeDaire = surface.add({type:'rect'});
								yuzde = textSprite.yuzde = surface.add({type:'text'});
							} else {
								rectSprite = textSprite.rectSprite;
								
								yuzdeDaire = textSprite.yuzdeDaire;
								yuzde = textSprite.yuzde;
								
								textSprite.show();
								rectSprite.show();
								yuzde.show();
							}
							
							yuzdesi = parseInt(numberformat(parseInt((record.data['gercek'] / record.data['hedef']) * 100)));
							
							if (yuzdesi < 100) yuzderenk = 'rgb(255,0,0)'; else yuzderenk = 'rgb(42,174,42)';
							
							yuzdeDaire.setAttributes({x: config.x - 17, y: -43, width: 36, height: 20, fill: yuzderenk, stroke: yuzderenk, radius: 5, opacity: 1, zIndex: 10000});
							yuzde.setAttributes({
								text: '%' + yuzdesi, 
								x: config.x - 14, y: -30, fill: 'white', fontSize: 12, fontWeight: 'bold', zIndex: 10001, scalingY: -1
							});
							
							if (yuzdesi >= 100 && yuzdesi <= 105) ustunegelme = 5; else ustunegelme = 0;
							textSprite.setAttributes({text: numberformat(record.data['hedef']), x: config.x - 11, y: config.y + 3 - ustunegelme, fill: 'black', fontSize: 9, fontWeight: 'bold', zIndex: 10001, scalingY: -1});
							rectSprite.setAttributes({x: config.x - 15, y: config.y - 15 - ustunegelme, width: 30, height: 30, fill: 'white', stroke: 'rgb(143,203,203)', radius: 20, opacity: 1, zIndex: 10000});
							
							return null;
                        },
                    },
					{
                        type: 'line',
                        xField: 'periyod',
                        yField: 'gercek',
						title: 'Gerçek',
						style: {stroke: 'rgb(148,174,10)', lineWidth: 4},
						
						renderer: function(sprite, config, rendererData, index) {
							//console.log('Gerçek: ' + config.x);
                            var store = rendererData.store,
                                storeItems = store.getData().items,
                                record = storeItems[index],
                                surface = sprite.getParent(),
                                textSprites, textSprite, rectSprite;
								
                            if (!record) {
                                return;
                            }
							
							textSprites = surface.myTextSprites1;
							if (!textSprites) {
								textSprites = surface.myTextSprites1 = [];
							}
							textSprite = textSprites[index];
							if (!textSprite) {
								textSprite = textSprites[index] = surface.add({type:'text'});
								rectSprite = textSprite.rectSprite = surface.add({type:'rect'});
							} else {
								rectSprite = textSprite.rectSprite;
								textSprite.show();
								rectSprite.show();
							}
							
							yuzdesi = parseInt(numberformat(parseInt((record.data['gercek'] / record.data['hedef']) * 100)));
							if (yuzdesi >= 100 && yuzdesi <= 105) ustunegelme = 5; else ustunegelme = 0;
							
							rectSprite.setAttributes({x: config.x - 15, y: config.y - 15 + ustunegelme, width: 30, height: 30, fill: 'white', stroke: 'rgb(143,203,203)', radius: 20, opacity: 1, zIndex: 10000});
							textSprite.setAttributes({text: numberformat(record.data['gercek']), x: config.x - 11, y: config.y + 3 + ustunegelme, fill: 'black', fontSize: 9, fontWeight: 'bold', zIndex: 10001, scalingY: -1});
							
							return null;
                        },
                    }
                ],
                axes: [
                    {
                        type: 'numeric',
                        position: 'left',
                        fields: ['hedef', 'gercek'],
						grid: true,
                    },
                    {
                        type: 'category',
                        position: 'bottom',
                        fields: 'periyod',
						grid: true,
                    }
                ]
            }
        ]
    },
	
    initialize: function () {
		this.callParent();
		
		var task = Ext.create('Ext.util.DelayedTask', function() {
			Ext.Viewport.mask({xtype: 'loadmask', message: _lang_Yukleniyor});
			Ext.getStore('SiparisTuruBazindaSevkiyat_Store').load(function(records, operation, success) {
				Ext.Viewport.unmask();
				
				Ext.getCmp('SiparisTuruBazindaSevkiyat_ID2').setHidden(false);
				Ext.getCmp('SiparisTuruBazindaSevkiyat_ID2').getLegend().setHidden(false);
			
			}, this);
		}, this);

		task.delay(500);
    },
	
	statics: {
        chart1: function () {
			alert("test");
		}
    }
});
//</feature>
